
<template>
  <div class="main img-container">
    <div
      v-for="(item, index) in images"
      :key="index"
      class="img-item"
      @click="choose(item)"
    >
      <el-image :src="item.img" fit="cover" class="image" />
      <div class="name">{{ item.name }}</div>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" :title="cur.name" width="500" draggable :fullscreen="false" :show-close="false">
  <el-result icon="info">
    <template #icon>
       <div>
       <el-image :src="cur.img" fit="cover" class="image" />
       </div> 
    </template>
	<template #sub-title> 
  
    <div v-html="cur.desc"></div>
    <span>{{ cur.filePath }}</span>
	</template>
	<template #extra>
	  <el-button type="primary">访问</el-button> 
	  <el-button type="primary">打开</el-button>
	</template>
</el-result> 
  </el-dialog>

  <mockDataVue v-model="flagMap.mockData" />

</template>

<script setup>
import { ref } from 'vue';
import data  from "./data/data.json"
import api  from "./api/api.js"
// 一点简易的功能
import colorVue from './apply/color.vue'
import copyVue from './apply/copy.vue'
import mockDataVue from './apply/mockData.vue'
import projectVue from './apply/project.vue'
const images = ref(data);
const cur = ref({});

const flagMap = ref({  });

const dialogVisible = ref(false)
const choose = async (item) => {
  console.log('选择的图片:', item);
  dialogVisible.value =true
  cur.value = item 
  navigator.clipboard.writeText(item.name).then(() => {});
  flagMap.value = {mockData:true}
  if(item.exe){ 
   const res = await api.find({params:{file: item.exe} })
   console.log(res)
   cur.value = {...item,...res}
   if(res.filePath){
     await api.call({params:{cli:  res.filePath} })
     setTimeout(()=>{
          dialogVisible.value = false 
     },1000)
   }
  }
  // 在这里实现 choose 函数的逻辑
};
 

</script>

<style scoped>
.img-container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  align-content: baseline;
  align-items: baseline;

  gap: 10px; /* 图片之间的间距 */
}

.img-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 3px;
  border-radius: 10px;
  transition: background-color .3s; /* 平滑过渡效果 */
  cursor: pointer;
}
.img-item:hover {
  background: #ccc;
}
.image {
  width: 50px; /* 图片宽度 */
  height: 50px; /* 图片高度 */

  object-fit: cover; /* 保持图片比例 */
}

.name {
  margin-top: 5px;
  font-size: 13px;
  text-align: center;
} 
.main {
  width: 100vw;
  height: 100vh;
  padding: 10px;
  background: url("./asserts/back.jpg");
}
</style>
